<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Message, Share } from '@element-plus/icons-vue';

import { tenantInfo, type TenantResult } from '#/api/cms.ts';

const tenant = ref<TenantResult>();
onMounted(async () => {
  tenant.value = await tenantInfo();
});
// 获取年
const currentYear = new Date().getFullYear();
const qrCodeUrl =
  'https://ai-public.mastergo.com/ai/img_res/e39d0386a6184bc31bd44a8f89349d19.jpg';
</script>

<template>
  <!-- 底部 -->
  <footer class="footer">
    <div class="footer-container">
      <div class="footer-grid">
        <div>
          <h3 class="footer-title">联系我们</h3>
          <p>地址：{{ tenant?.tenantContactAddress }}</p>
          <p>邮编：{{ tenant?.tenantContactEmail }}</p>
          <p>电话：{{ tenant?.tenantContactPhone }}</p>
        </div>
        <div>
          <h3 class="footer-title">快速链接</h3>
          <ul class="quick-links">
            <li><a class="footer-link" href="#">招生信息</a></li>
            <li><a class="footer-link" href="#">科研成果</a></li>
            <li><a class="footer-link" href="#">学术资源</a></li>
          </ul>
        </div>
        <div>
          <h3 class="footer-title">关注我们</h3>
          <div class="social-icons">
            <el-icon class="social-icon"><Message /></el-icon>
            <el-icon class="social-icon"><Share /></el-icon>
          </div>
        </div>
        <div>
          <img :src="qrCodeUrl" alt="微信二维码" class="qr-code" />
        </div>
      </div>
      <div class="footer-bottom">
        <p>© {{ currentYear }} {{ tenant?.tenantName }} 版权所有</p>
      </div>
    </div>
  </footer>
</template>

<style scoped>
.footer {
  @apply bg-gray-800 py-12 text-white;
}

.footer-container {
  @apply container mx-auto px-4;
}

.footer-grid {
  @apply grid grid-cols-4 gap-8;
}

.footer-title {
  @apply mb-4 text-xl font-bold;
}

.quick-links {
  @apply space-y-2;
}

.footer-link {
  @apply hover:text-blue-400;
}

.social-icons {
  @apply flex space-x-4;
}

.social-icon {
  @apply cursor-pointer text-2xl;
}

.qr-code {
  @apply w-32;
}

.footer-bottom {
  @apply mt-8 border-t border-gray-700 pt-8 text-center;
}
</style>
